<template>
  <div class="login-wrapper">
    <div class="left-box">
      <span class="title">{{"中国移动研究院云展工具"}}</span>
      <span class="detail">{{"为您提供全面的展区信息化服务，实现展示材料云化、创造成果共享，进行专业的活动筹备规划，展示信息统计等"}}</span>
      <div class="input-container" key="input-container">
        <div class="input-box">
          <span class="title">{{"登录账号"}}</span>
          <div class="input-row" :class="{active: focusInput == 'username'}">
            <img src="@media/login/login-phone@2x.png" />
            <div class="input-border">
              <input
                type="text"
                v-model="username"
                maxlength="20"
                placeholder="请输入您的登录账号"
                @blur="focusInput = ''"
                @focus="focusInput = 'username'"
              />
            </div>
          </div>
        </div>
        <div class="input-box">
          <span class="title">{{"密码"}}</span>
          <div class="input-row" :class="{active: focusInput == 'password'}">
            <img src="@media/login/login-password@2x.png" />
            <div class="input-border">
              <input
                :type="isShowPassword ? 'text' : 'password'"
                v-model="password"
                maxlength="20"
                minlength="6"
                placeholder="请输入您的密码"
                @blur="focusInput = ''"
                @focus="focusInput = 'password'"
              />
            </div>
            <button
              class="show-password"
              :class="{active: isShowPassword}"
              @click="handleClickShowPassword"
            ></button>
          </div>
        </div>
        <div class="check-box">
          <button class="check-button" :class="{active: isChecked}" @click="isChecked = !isChecked"></button>
          <span>{{"记住密码"}}</span>
        </div>
      </div>
      <button class="login-button" @click="handleClickLogin">{{"登录"}}</button>
    </div>
    <!--    <div class="right-box">-->
    <!--      <img src="@media/login/login-right-img@2x.png">-->
    <!--    </div>-->
  </div>
</template>

<script>
import userService from "@api/userService";
import router from "@/router";

export default {
  data() {
    return {
      username: "15337208581",
      password: "123456",
      isShowPassword: false,
      focusInput: "",
      isChecked: false,
    };
  },
  methods: {
    handleClickShowPassword() {
      this.isShowPassword = !this.isShowPassword;
    },
    handleClickLogin() {
      this.handleRequestLogin();
    },
    handleRequestLogin() {
      let params = {
        telephone: this.username,
        password: this.password,
      };
      userService
        .login(params)
        .then((res) => {
          this.$store.commit("user/SET_USER_DATA", res.data.data);
          console.log(this.$store.state.user.user);
          this.setUserInfo();
          this.$message({
            message: "登录成功",
            type: "success",
          });
          console.log(res.data.data);
          const bool = res.data.data.roles.findIndex((item) => {
            return item.alias === "admin";
          });
          if (bool >= 0) {
            localStorage.setItem("bool", JSON.stringify({ bool: true }));
          } else {
            localStorage.setItem("bool", JSON.stringify({ bool: false }));
          }
          console.log(
            typeof JSON.parse(localStorage.getItem("bool")).bool,
            JSON.parse(localStorage.getItem("bool"))
          );
          router.replace({
            name: "home",
          });
        })
        .catch((res) => {
          console.log(res);
        });
    },
    setUserInfo() {
      this.setCookie("username", this.isChecked ? this.username : "");
      this.setCookie("password", this.isChecked ? this.password : "");
    },
    getCookie(key) {
      if (document.cookie.length > 0) {
        let start = document.cookie.indexOf(key + "=");
        if (start !== -1) {
          start = start + key.length + 1;
          let end = document.cookie.indexOf(";", start);
          if (end === -1) end = document.cookie.length;
          return unescape(document.cookie.substring(start, end));
        }
      }
      return "";
    },
    setCookie(cName, value) {
      document.cookie = cName + "=" + decodeURIComponent(value);
    },
  },
  computed: {},
  components: {},
  created() {
    console.log(111);
    this.$store.commit("user/LOGOUT");
    this.username = this.getCookie("username");
    this.password = this.getCookie("password");
    this.isChecked = this.password != "";
  },
  watch: {},
};
</script>

<style scoped lang="scss">
@import "@/style/scss/login.scss";
</style>

